<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1 v-text="msg" id="titleH1" ref="vueRefTitle"></h1>
    <button @click="showDOM1">点我输出上方dom1</button>
    <button ref="btn" @click="showDOM2">点我输出上方dom2</button>
    <!-- 这个ref是vc组件 -->
    <School ref="sch"></School>
  </div>
</template>

<script>
import School from './components/School.vue'

export default {
  name: 'App',
  data(){
    return{
      msg:'welcome'
    }
  },
  components: {
    School
  },
  methods:{
    showDOM1(){
      console.log(document.getElementById('titleH1'));
    },
    showDOM2(){
      console.log(this.$refs);
      console.log(this.$refs.vueRefTitle);//真实dom-h1
      console.log(this.$refs.btn);//真实dom(btn)
      console.log(this.$refs.sch);//真实vc组件
    }
  }
}
</script>

<style>

</style>
